<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  get_identity_type_list_api,
  add_api,
  del_api,
  info_api,
} from "@/package/my/api/tour_info";
import { EV_CONTACTS } from "@/constant/event";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import FormPicker from "@/components/form/picker.vue";
import FormButton from "@/components/form/button.vue";
import PopupModal from "@/components/popup/modal.vue";

onLoad((options) => {
  const reloadTypeList = () => {
    return get_identity_type_list_api().then((resp) => {
      typeList.value = resp.identity_type;
    });
  };

  const reloadData = () => {
    return options?.id
      ? info_api({ id: options?.id }).then((resp) => {
          editForm.id = resp.id;
          editForm.name = resp.name;
          editForm.phone = resp.phone;
          editForm.cardNo = resp.cardNo;
          editForm.identity_type = resp.identity_type;
        })
      : Promise.resolve();
  };

  Promise.all([reloadTypeList(), reloadData()]).then(() => {
    if (editForm.identity_type) {
      typeIndex.value = typeList.value.findIndex(
        (i) => i.id === editForm.identity_type
      );
    }
  });
});

const editForm = reactive({
  id: "",
  name: "",
  phone: "",
  cardNo: "",
  identity_type: 1,
});

const typeIndex = ref(0);
const typeList = ref<any[]>([]);

const saveClick = () => {
  Toast.showLoading();
  add_api({
    ...toRaw(editForm),
    identity_type: typeList.value[typeIndex.value]?.id,
  })
    .then(() => {
      Toast.hideLoading();
      uni.$emit(EV_CONTACTS, { type: "edit" });
      Router.navigateBack();
    })
    .catch(() => Toast.hideLoading());
};

const delClick = () => {
  popupModal.value?.show({ content: "是否确定删除该信息？" }, () => {
    Toast.showLoading();
    del_api({ id: editForm.id })
      .then(() => {
        Toast.hideLoading();
        Toast.show("删除成功");
        uni.$emit(EV_CONTACTS, { type: "del" });
        Router.navigateBack();
      })
      .catch(() => Toast.hideLoading());
  });
};

const popupModal = ref<InstanceType<typeof PopupModal>>();
</script>

<template>
  <view class="edit-form">
    <uni-forms :modelValue="editForm" border label-width="80px">
      <uni-forms-item label="姓名" name="name" required>
        <input
          class="edit-form-input"
          v-model="editForm.name"
          placeholder="填写联系人姓名"
          placeholder-style="color: #999999"
        />
      </uni-forms-item>
      <uni-forms-item label="手机号码" name="phone" required>
        <input
          class="edit-form-input"
          v-model="editForm.phone"
          type="number"
          :maxlength="11"
          placeholder="用于联系与接收确认短信"
          placeholder-style="color: #999999"
        />
      </uni-forms-item>
      <uni-forms-item name="cardNo">
        <template #label>
          <FormPicker v-model="typeIndex" :range="typeList" rangeKey="name">
            <view class="edit-form-lable">
              {{ typeList.length === 0 ? "" : typeList[typeIndex].name }}&nbsp;
              <image
                class="edit-form-arrow"
                src="@/package/my/static/address-arrow.png"
              />
            </view>
          </FormPicker>
        </template>
        <input
          class="edit-form-input"
          v-model="editForm.cardNo"
          type="idcard"
          :maxlength="18"
          placeholder="选填，购买门票与保险时必填身份证号"
          placeholder-style="color: #999999"
        />
      </uni-forms-item>
    </uni-forms>
  </view>

  <view class="edit-del" v-if="editForm.id" @click="delClick">
    <image class="edit-del-icon" src="/package/my/static/address-del.png" />
    删除信息
  </view>

  <view class="edit-fixed">
    <view @click="saveClick">
      <FormButton>保存</FormButton>
    </view>
  </view>

  <PopupModal ref="popupModal" />
</template>

<style lang="scss">
page {
  padding-top: 6rpx;
}

.edit-form {
  padding: 0 30rpx;
  margin-bottom: 60rpx;
  background-color: #ffffff;

  .edit-form-input {
    height: 72rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 48rpx;
  }

  .edit-form-lable {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    width: 150rpx;
    height: 72rpx;
    padding-right: 24rpx;
    font-size: 28rpx;
    color: #606266;
    box-sizing: border-box;
  }

  .edit-form-arrow {
    width: 24rpx;
    height: 24rpx;
    transform: rotate(90deg);
  }
}

.edit-del {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200rpx;
  height: 56rpx;
  margin-left: auto;
  margin-right: 30rpx;
  font-size: 28rpx;
  color: #666666;
  line-height: 36rpx;
  border-radius: 29rpx;
  border: 2rpx solid #dddddd;

  .edit-del-icon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
  }
}

.edit-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 106rpx;
  padding: 14rpx 60rpx env(safe-area-inset-bottom);
  background-color: #ffffff;
}
</style>